<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>标签云 | MyUI 4.x</title>
    <meta name="generator" content="VuePress 1.5.0">
    <link rel="icon" href="/my/favicon.ico">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <meta name="description" content="MyUI是美亚柏科旗下新德汇出品的Web前端一站式项目工程框架，专注于公检法行业中台系统快速搭建，框架已在多个项目实战检验。">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="preload" href="/my/assets/css/0.styles.3b7da768.css" as="style"><link rel="preload" href="/my/assets/js/app.145deadf.js" as="script"><link rel="preload" href="/my/assets/js/546.c48d7d92.js" as="script"><link rel="preload" href="/my/assets/js/1344.5433d43d.js" as="script"><link rel="preload" href="/my/assets/js/974.ffa6c050.js" as="script">
    <link rel="stylesheet" href="/my/assets/css/0.styles.3b7da768.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my/" class="home-link router-link-active"><img src="/my/img/logo.png" alt="MyUI 4.x" class="logo"> <span class="site-name can-hide">MyUI 4.x</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link router-link-active">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link router-link-active">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/my/ui/charts/" aria-current="page" class="sidebar-link">概念和原理</a></li><li><a href="/my/ui/charts/chart.html" class="sidebar-link">图表基础组件</a></li><li><a href="/my/ui/charts/line.html" class="sidebar-link">折线图</a></li><li><a href="/my/ui/charts/bar.html" class="sidebar-link">柱状图</a></li><li><a href="/my/ui/charts/pie.html" class="sidebar-link">饼图</a></li><li><a href="/my/ui/charts/map.html" class="sidebar-link">地图</a></li><li><a href="/my/ui/charts/radar.html" class="sidebar-link">雷达图</a></li><li><a href="/my/ui/charts/cloud.html" aria-current="page" class="active sidebar-link">标签云</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/charts/cloud.html#基础用法" class="sidebar-link">基础用法</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/cloud.html#随机权重" class="sidebar-link">随机权重</a></li><li class="sidebar-sub-header"><a href="/my/ui/charts/cloud.html#配置参考" class="sidebar-link">配置参考</a></li></ul></li><li><a href="/my/ui/charts/fill.html" class="sidebar-link">填充图</a></li><li><a href="/my/ui/charts/gl.html" class="sidebar-link">GL 3D图表</a></li><li><a href="/my/ui/charts/geojson.html" class="sidebar-link">GeoJson</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="标签云"><a href="#标签云" class="header-anchor">#</a> 标签云</h1> <h2 id="基础用法"><a href="#基础用法" class="header-anchor">#</a> 基础用法</h2> <!----><h2 id="随机权重"><a href="#随机权重" class="header-anchor">#</a> 随机权重</h2> <!----><h2 id="配置参考"><a href="#配置参考" class="header-anchor">#</a> 配置参考</h2> <div class="language-js line-numbers-mode"><pre class="language-js"><code>    series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'wordCloud'</span><span class="token punctuation">,</span>

        <span class="token comment">// The shape of the &quot;cloud&quot; to draw. Can be any polar equation represented as a</span>
        <span class="token comment">// callback function, or a keyword present. Available presents are circle (default),</span>
        <span class="token comment">// cardioid (apple or heart shape curve, the most known polar equation), diamond (</span>
        <span class="token comment">// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.</span>

        shape<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>

        <span class="token comment">// A silhouette image which the white area will be excluded from drawing texts.</span>
        <span class="token comment">// The shape option will continue to apply as the shape of the cloud to grow.</span>

        maskImage<span class="token operator">:</span> maskImage<span class="token punctuation">,</span>

        <span class="token comment">// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud</span>
        <span class="token comment">// Default to be put in the center and has 75% x 80% size.</span>

        left<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
        top<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
        width<span class="token operator">:</span> <span class="token string">'70%'</span><span class="token punctuation">,</span>
        height<span class="token operator">:</span> <span class="token string">'80%'</span><span class="token punctuation">,</span>
        right<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
        bottom<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>

        <span class="token comment">// Text size range which the value in data will be mapped to.</span>
        <span class="token comment">// Default to have minimum 12px and maximum 60px size.</span>

        sizeRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">]</span><span class="token punctuation">,</span>

        <span class="token comment">// Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45</span>

        rotationRange<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">90</span><span class="token punctuation">,</span> <span class="token number">90</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        rotationStep<span class="token operator">:</span> <span class="token number">45</span><span class="token punctuation">,</span>

        <span class="token comment">// size of the grid in pixels for marking the availability of the canvas</span>
        <span class="token comment">// the larger the grid size, the bigger the gap between words.</span>

        gridSize<span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>

        <span class="token comment">// set to true to allow word being draw partly outside of the canvas.</span>
        <span class="token comment">// Allow word bigger than the size of the canvas to be drawn</span>
        drawOutOfBound<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>

        <span class="token comment">// Global text style</span>
        textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
                fontFamily<span class="token operator">:</span> <span class="token string">'sans-serif'</span><span class="token punctuation">,</span>
                fontWeight<span class="token operator">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span>
                <span class="token comment">// Color can be a callback function or a color string</span>
                <span class="token function-variable function">color</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token comment">// Random color</span>
                    <span class="token keyword">return</span> <span class="token string">'rgb('</span> <span class="token operator">+</span> <span class="token punctuation">[</span>
                        Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">160</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                        Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">160</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                        Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">160</span><span class="token punctuation">)</span>
                    <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">')'</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
                shadowBlur<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
                shadowColor<span class="token operator">:</span> <span class="token string">'#333'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>

        <span class="token comment">// Data is an array. Each array item must have name and value property.</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">'Farrah Abraham'</span><span class="token punctuation">,</span>
            value<span class="token operator">:</span> <span class="token number">366</span><span class="token punctuation">,</span>
            <span class="token comment">// Style of single text</span>
            textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
                normal<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
                emphasis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/my/ui/charts/radar.html" class="prev">
        雷达图
      </a></span> <span class="next"><a href="/my/ui/charts/fill.html">
        填充图
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/my/assets/js/app.145deadf.js" defer></script><script src="/my/assets/js/546.c48d7d92.js" defer></script><script src="/my/assets/js/1344.5433d43d.js" defer></script><script src="/my/assets/js/974.ffa6c050.js" defer></script>
  </body>
</html>
